<template>
    <div class="element element--list referenced-tickers">
        <header class="header header--secondary">
            <span class="label">Referenced Symbols</span>
        </header>
        <input type="checkbox" class="hidden toggle--tickers" id="toggle--tickers">
        <ul class="list list--tickers">
            <bg-quote class="ticker__item positive" v-for="(item, index) in props.symbolData" :key="index">
                <a class="qt-chip-referenced link">
                    <span class="symbol">{{ item.data }}</span>
                    <div class="change">
                        <bg-quote :class="[item.value < 0 ? 'negative' : 'positive']">{{ item.value }}%</bg-quote>
                        <i class="icon--"></i>
                    </div>
                </a>
            </bg-quote>
        </ul>
    </div>
</template>
<script setup lang='ts'>
const props = defineProps(['symbolData'])
</script>
<style scoped lang='scss'>
.header .label {
    font: 800 1.285714286rem / 1.125 Muli, sans-serif;
    color: #202020;
    white-space: nowrap;
}

.list--tickers {
    display: flex;
    flex-flow: row wrap;
    overflow: hidden;
    max-height: 46px;

    .ticker__item {
        display: flex;
        align-items: center;
        margin: 0 10px 5px 0;

        .symbol {
            font: 700 1rem / 1.375 Lato, sans-serif;
            color: #2e2e2e;
            margin-right: 3px;
        }
    }

    .link {
        display: flex;
    }
}
</style>